<!--
 * @Description: 
 * @Author: hanyu
 * @Date: 2022-03-02 16:27:19
 * @LastEditTime: 2022-04-05 11:15:34
 * @LastEditors: hanyu
-->
<template>
    <div class="home" :class="{'home-box': $route.name != 'DataPage'}">
        <!-- 顶部layout -- begin -->
        <div class="layout-box">
            <div class="layout-header">
                <div class="right-box flex-a-center">
                    <div>
                        {{$store.getters.userLoginInfo.username}}
                    </div>
                    <Tooltip content="退出登录">
                        <Icon size="30" type="md-power" style="margin-left: 10px;margin-right: 10px" @click="loginOut" />
                    </Tooltip>
                </div>
                <div class="header-title" @click="onHome" v-if="$store.state.app.webInfo && $store.state.app.webInfo.website_name">
                    {{$store.state.app.webInfo.website_name}}
                </div>
                <!-- <img src="@/assets/logo.png" class="logo" alt=""> -->
            </div>
            <div class="nav-box">
                <div class="menu-box flex-j-between">
                    <div class="menu-left flex-a-center">
                        <div class="menu-item" @click="onTab(1)" :class="{'active-item': activeTab == 1}">
                            属地网站管理
                        </div>
                        <div class="menu-item" @click="onTab(2)" :class="{'active-item': activeTab == 2}">
                            属地社交账号管理
                        </div>
                        <div class="menu-item" @click="onTab(3)" :class="{'active-item': activeTab == 3}">
                            今日预警信息
                        </div>
                    </div>
                    <div class="menu-right flex-a-center">
                        <div class="menu-item" @click="onTab(4)" :class="{'active-item': activeTab == 4}">
                            专项行动
                        </div>
                        <div v-if="activeTab == 1" class="search-box flex-a-center">
                            <input v-model="searchTxt" placeholder="关键词查询" />
                            <img class="search-icon" src="@/assets/img/search-icon.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 顶部layout -- end -->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
        <router-view />
    </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data() {
    return {
      searchTxt: ''
    }
  },
  computed: {
    activeTab() {
      return this.$store.state.app.activeTab
    }
  },
  watch: {
    activeTab(e) {
      if (e == 1) {
        this.searchTxt = ''
      }
    },
    searchTxt(e) {
      this.$store.dispatch('changeInputSearch', e)
    }
  },
  methods: {
    loginOut() {
      this.$store.commit('clearLocalStorage')
      this.$store.commit('setToken', null);
      this.$store.commit('setUserLoginInfo', null);
      this.$router.replace({
        path: '/'
      })
    },
    changeInput(e) {
    },
    // 进入首页
    onHome() {
      this.$router.push({
        name: 'home'
      })
    },
    onTab(val) {
      let url = ''
      switch (val) {
        case 1:
          url = 'WebData'
          break;
        case 2:
          // url = 'Account'
          this.$Message.warning('正在开发中')
          return
          // eslint-disable-next-line no-unreachable
          break;
        case 3:
          url = 'WarningInfo'
          break;
        case 4:
          url = 'Special'
          break;

        default:
          break;
      }
      this.$router.push({
        name: url
      })
    }
  },
}
</script>
<style lang="less" scoped>
.home {
  background: url("../assets/img/bg-1.png") top center no-repeat;
  background-size: 100% 100%;
  .layout-box {
    .layout-header {
      height: 150px;
      width: 100%;
      position: relative;
      .right-box {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 30px;
        color: #ffffff;
        z-index: 10;
      }
      .header-title {
        cursor: pointer;
        position: absolute;
        left: 78px;
        top: 52px;
        font-size: 30px;
        color: #fff;
      }
      .logo {
        width: 100px;
        height: 32px;
        position: absolute;
        right: 70px;
        top: 68px;
      }
    }
    .nav-box {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #fff;
      padding-left: 90px;
      padding-top: 20px;
      width: 100%;
      padding-bottom: 24px;
      background: rgba(0, 0, 0, 0.1);
      .menu-box {
        width: 100%;
        display: flex;
        align-items: center;
        .menu-item {
          position: relative;
          font-size: 18px;
          margin-left: 68px;
          cursor: pointer;
          &:hover {
            color: #60bdff;
          }
          &:nth-of-type(1) {
            margin-left: 0;
          }
        }
        .active-item::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 37px;
          height: 2px;
          background: #fff;
          bottom: -13px;
        }
        .menu-right {
          padding-right: 76px;
          .search-box {
            margin-left: 96px;
            border-radius: 20px;
            border: 1px solid #fff;
            padding: 3px;
            padding-right: 10px;
            width: 274px;
            input {
              background: transparent;
              margin-left: 10px;
              color: #fff;
              width: 100%;
            }
            input::placeholder {
              color: rgba(255, 255, 255, 0.6);
              font-size: 14px;
            }
            .search-icon {
              width: 11px;
              height: 10px;
            }
          }
        }
      }
    }
  }
}
.home-box {
  height: 100vh;
  overflow: hidden;
}
</style>